<template>
  <div id="exhibition2"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb2.png" />
                  业绩
             </div>          
         </div>
         <div class="box">
              <div class="box_top">
                   <!-- <div class="box_top_but" @click="all_but()">总数</div> -->
                    <div> 
                      <el-form ref="form" :model="form" label-width="80px">  
                       <el-form-item label="" label-width="0px" style="margin-left:10px;margin-bottom:0px !important;">
                         <el-date-picker 
                          type="month" placeholder="选择日期" @change="data_fun" format="yyyy-MM" value-format="yyyy-MM"  v-model="form.time"  style="width:150px;"></el-date-picker>
                       </el-form-item>
                        </el-form>
                 </div>
              </div>
              <div class="box_con">
               <div class="orchard_con3">
                        <div class="item_a" style="display:flex;">
                            <div class="item_b" style="display: flex;align-items: center;flex-direction: column;border-right:1px solid #D9D9D9;">
                                  <div class="item_b_1">活跃用户总数</div>
                                  <div class="item_b_2">{{ all_active_count }}</div>
                              </div>
                              <div class="item_b" style="display: flex;align-items: center;flex-direction: column;">
                                  <div class="item_b_1">活跃用户数</div>
                                  <div class="item_b_2">{{ mouth_active_count }}</div>
                              </div>
                         </div>
                         <div class="item_a" style="display:flex;margin-top:0px;">
                                <div class="item_b" style="display: flex;align-items: center;flex-direction: column;border-right:1px solid #D9D9D9;">
                                  <div class="item_b_1">粉丝用户总数</div>
                                  <div class="item_b_2">{{ all_fans_count }}</div>
                              </div>
                              <div class="item_b" style="display: flex;align-items: center;flex-direction: column;">
                                  <div class="item_b_1">粉丝用户数</div>
                                  <div class="item_b_2">{{ mouth_fans_count }}</div>
                              </div>
                         </div>
                </div>
              </div>
            
         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'exhibition2',
  data () {
    return {
      list_data:'',
      form:{
        time:''
      },
      all_active_count:0,
      all_fans_count:0,
      mouth_active_count:0,
      mouth_fans_count:0,
      type:0,
    }
  },
   components:{

  },
  created(){
      this.form.time = this.getNowDate3()
      this.list_fun()
  },
  mounted (){
   
  },
  methods: {
    list_fun(){
       this.post("/business_management/activeAndFans", {
             onetime:this.form.time,
             type:this.type
	        }).then(res => {
            console.log(res,"ssss")
            this.all_active_count = res.result.all_active_count
            this.all_fans_count = res.result.all_fans_count
            this.mouth_active_count = res.result.mouth_active_count
            this.mouth_fans_count = res.result.mouth_fans_count
         }) 
    },
    data_fun(){
       this.type = 0
       this.list_fun()
    },
    // all_but(){
    //    this.type = 1
    //    this.form.time = ''
    //    this.list_fun()
    // }
  }
}
</script>


<style scoped>
.con{
   padding:15px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.box{
    padding: 10px 20px;
    border-radius: 10px; 
    box-shadow: 0px 4px 9px 0px rgba(116, 77, 254, 0.1);
    margin-top:0px;
    height:200px;
}
.box_top{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.box_top_but{
   height: 40px;
   line-height:40px;
   background: #F9E6EB;
   border-radius: 6px;
   padding: 0px 30px;
   color: #FD4163;
   cursor: pointer;
}
.orchard_con3{
    border-radius:7px;  
    flex:1;
    height: 100%;
    margin-left:40px;
    box-sizing: border-box;
}
.item_a{
  display:flex;
  padding:0px 15px;
}
.item_b{
  flex: 1;
}
.item_b_1{
  font-size: 14px;
  font-weight: 500;
  color: #5E6C84;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.item_b_1_img{
  width:20px;
  height: 20px;
  margin-right:5px;
}
.item_b_2{
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
</style>